<template>
  <div class="v-mfr-view">
    <c-row-crumb :title="multLang('title_pt')"></c-row-crumb>
    <c-mfr-view-head>
      <el-form
        :model="baseForm"
        :rules="baseRules"
        ref="baseForm"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item :label="multLang('title_name_m', ':')" prop="title">
              <c-form-edit :visible="baseVisible">
                <template #edit>
                  <el-input
                    v-model="baseForm.title"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ baseForm.title }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_pr', ':')" prop="inner_code">
              <c-form-edit :visible="baseVisible">
                <template #edit>
                  <el-input
                    v-model="baseForm.inner_code"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ baseForm.inner_code }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
      <template #opn>
        <c-row-view-opn
          :auth="auth.isEdit"
          :visible="baseVisible"
          @update:visible="visibles.base = $event"
          @cancel="baseCancel"
          @save="baseSave"
        >
        </c-row-view-opn>
      </template>
    </c-mfr-view-head>
    <c-tabs :value="tabnub" class="v-mfr-view-body" @click="args">
      <el-tab-pane :label="multLang('tab_info_a')" name="1" :key="'info'">
        <c-mfr-view-info
          :info="info"
          :auth="auth.isEdit"
          @query="queryInfo"
          v-if="tabnub === '1'"
        ></c-mfr-view-info>
      </el-tab-pane>
      <el-tab-pane :label="multLang('联系人')" name="2" :key="'contacts'">
        <c-mfr-contacts
          :info="info"
          :auth="auth.isEdit"
          v-if="tabnub === '2'"
        ></c-mfr-contacts>
      </el-tab-pane>
      <el-tab-pane :label="multLang('附件文档')" name="3" :key="'enclosure'">
        <c-mfr-enclosure
          :info="info"
          :auth="auth.isEdit"
          v-if="tabnub === '3'"
        ></c-mfr-enclosure>
      </el-tab-pane>
    </c-tabs>
  </div>
</template>
<script>
import { ObjectCopy } from '@/util'
import CMfrViewHead from './mod/ViewHead.vue'
import CMfrViewInfo from './mod/ViewInfo.vue'
import CMfrContacts from './mod/contacts.vue'
import CMfrEnclosure from './mod/enclosure.vue'
import { editMfrData, getMfrInfo } from '@/http/api/v1/mfr'
import { closeTag } from '@/util/router'

export default {
  name: 'VMfrView',
  components: { CMfrViewHead, CMfrViewInfo, CMfrContacts, CMfrEnclosure },
  props: {},
  data() {
    return {
      id: '',
      info: {},
      auth: {
        isEdit: false
      },
      visibles: {
        base: false,
        info: false
      },
      baseForm: {
        sectionType: 'facilitiesTop',
        title: '',
        inner_code: ''
      },
      tabnub: '1'
    }
  },
  computed: {
    baseVisible() {
      return this.auth.isEdit && this.visibles.base
    },
    baseRules() {
      return {
        title: {
          required: true,
          message: this.multLang('title_name_m', 'msg_g'),
          trigger: 'blur'
        },
        inner_code: {
          required: true,
          message: this.multLang('title_pr', 'msg_g'),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const {
      name,
      params: { id, edit, auth }
    } = this.$route
    const cacheid = id || this.id
    if (cacheid) {
      this.id = cacheid
      this.query()
    } else {
      closeTag(name)
    }
    typeof edit === 'boolean' && (this.visibles.base = edit)
    auth && ObjectCopy(this.auth, auth)
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    args(tabs) {
      this.$nextTick(() => {
        this.tabnub = tabs.name
        console.log('tabs', this.tabnub)
      })
    },
    copyData(data, raw) {
      return ObjectCopy(data, raw, {
        skip: 'sectionType'
      })
    },
    query() {
      this.queryInfo()
    },
    queryInfo() {
      const { id } = this
      getMfrInfo({ id }).then(({ data }) => {
        this.info = data || {}
        this.copyData(this.baseForm, data)
        this.$nextTick().then(() => this.$refs.baseForm.clearValidate())
      })
    },
    baseCancel() {
      this.copyData(this.baseForm, this.info)
      this.$nextTick().then(() => this.$refs.baseForm.clearValidate())
      this.visibles.base = false
    },
    baseSave() {
      this.$refs.baseForm.validate(
        valid =>
          valid &&
          editMfrData({ id: this.id, ...this.baseForm }).then(() => {
            this.visibles.base = false
            this.queryInfo()
          })
      )
    }
  }
}
</script>
<style lang="scss">
.v-mfr-view {
  &-body {
    height: calc(100% - 120px);
  }
}
</style>
